<template>
  <el-upload
    action="#"
    name="file"
    list-type="picture-card"
    :http-request="httpRequest"
    :on-remove="onRemove"
    :file-list="fileList"
    :class="{ disabled: fileList.length === 1 }"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>
<script>
import { uploadImage } from '@/api/user'
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 移除图片
    onRemove(file, fileList) {
      this.fileList = fileList
    },
    // 覆盖默认上传行为
    async httpRequest(data) {
      const file = data.file // 要上传的文件信息
      // 准备数据
      let fd = new FormData() // formData实例
      // fd.append(数据字段名,文件信息)  // 插入数据
      fd.append('file', file)
      // 发生上传请求
      let res = await uploadImage(fd)
      this.fileList = [
        {
          url: 'http://124.223.14.236:8060/' + res.savePath, // 显示的图片
          realtiveUrl: res.savePath // 提交的图片
        }
      ]
      // 放在fileList里面去
    }
  }
}
</script>
<style lang="less" scoped>
.disabled {
  /deep/ .el-upload--picture-card {
    display: none;
  }
}
</style>
